<template>
  <div>
    <!-- Topic专题管理 -->
    <div class="title">
      名称
      <el-input
        v-model="tableDataName"
        placeholder="属性名称"
        style="width: 240px"
        size="medium"
      ></el-input>

      <el-button type="primary" size="medium" @click="doFilter">查询</el-button>
      <el-button type="primary" size="medium" @click="openData">添加</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border max-height="700">
      <el-table-column fixed prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="title" label="主标签"> </el-table-column>
      <el-table-column prop="price_info" label="起步价格"> </el-table-column>
      <el-table-column prop="is_show" label="显示">
      <template slot-scope="scope">
        {{scope.row.is_show&&scope.row.is_show===1?'是':'否'}}
      </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
  </div>
</template>

 <script>
import { getAdminTopicApi } from "../../request/httpaip";
export default {
  data() {
    return {
      currentPage4: 1,
      //分页器当前页
      page: 1,
      //请求页数
      tableData: [],
      //表格数据
      pageSize: 10,
      //显示条数
      totalPages: 0,
      //总页数
      count: 0,
      //数据总数
      tableDataName:'',
      //专题输入框内容
    };
  },
  methods: {
    //一页显示条数事件
    handleSizeChange(val) {
      this.pageSize = val;

      //查询专题列表
      getAdminTopicApi({
        page: this.page,
        size: this.pageSize,
        name: "",
      }).then((res) => {
        // console.log(res.data);
        if (res.errno === 0) {
          this.currentPage4 = res.data.currentPage4;
          //分页器当前页
          this.tableData = res.data.data;
          //表格数据
          this.pageSize = res.data.pageSize;
          //显示条数
          this.totalPages = res.data.totalPages;
          //总页数
          this.count = res.data.count;
          //数据总数
        }
      });
    },
    //页数点击事件
    handleCurrentChange(val) {
      this.page = val;

      //查询专题列表
      getAdminTopicApi({
        page: this.page,
        size: this.pageSize,
        name: "",
      }).then((res) => {
        // console.log(res.data);
        if (res.errno === 0) {
          this.currentPage4 = res.data.currentPage4;
          //分页器当前页
          this.tableData = res.data.data;
          //表格数据
          this.pageSize = res.data.pageSize;
          //显示条数
          this.totalPages = res.data.totalPages;
          //总页数
          this.count = res.data.count;
          //数据总数
        }
      });
    },

    // 跳转添加页事件
    openData() {
      this.$router.push({
        //核心语句
        path: "/addtopic", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: this.id,
        },
      });
    },

    //查询事件
    doFilter() {
      //查询专题列表
      getAdminTopicApi({
        page: this.page,
        size: this.pageSize,
        name: this.tableDataName,
      }).then((res) => {
        // console.log(res.data);
        if (res.errno === 0) {
          this.currentPage4 = res.data.currentPage4;
          //分页器当前页
          this.tableData = res.data.data;
          //表格数据
          this.pageSize = res.data.pageSize;
          //显示条数
          this.totalPages = res.data.totalPages;
          //总页数
          this.count = res.data.count;
          //数据总数
        }
      });
    },
  },
  created() {
    //查询专题列表
    getAdminTopicApi({
      page: this.page,
      size: this.pageSize,
      name: "",
    }).then((res) => {
      console.log(res.data);
      if (res.errno === 0) {
        this.currentPage4 = res.data.currentPage4;
        //分页器当前页
        this.tableData = res.data.data;
        //表格数据
        this.pageSize = res.data.pageSize;
        //显示条数
        this.totalPages = res.data.totalPages;
        //总页数
        this.count = res.data.count;
        //数据总数
      }
    });
  },
};
</script>
<style lang = "less" scoped>
.title {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  /*输入框  */
  .el-input {
    margin: 0 8px;
  }
  /* 按钮 */
  .el-button {
    margin: 0 8px;
  }
}
/* 分页样式 */
.el-pagination {
  float: right;
}
</style>